<template>
  <a-modal
    :title="form.id ? '修改' : '新增'"
    width="800px"
    v-model="visible"
    @ok="submit"
    :afterClose="closeModal"
    :destroyOnClose="true"
    :confirmLoading="btnLoading"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="选择仓库" prop="front_agent_admin_id">
        <!-- <div class="flex">
          <a-input class="inp" disabled v-model="front_agent_admin_name" placeholder="请选择仓库" />
          <a-button type="primary" @click="handle('open', 'depot')">选择</a-button>
        </div> -->
        <a-select
          v-model="form.front_agent_admin_id"
          allowClear
          :filter-option="filterOption"
          show-search
          @change="handleSearch"
        >
          <a-select-option v-for="item of list" :value="item.id" :key="item.id"
            >{{ item.name }}<template v-if="address">-{{ item.address }}</template>
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="`选择${supplierName}`" prop="supplier_id" v-if="showSupplier">
        <div class="flex">
          <a-input class="inp" disabled v-model="supplier_name" :placeholder="`请选择${supplierName}`" />
          <a-button type="primary" @click="handle('open', 'supplier')">选择</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>

    <depotListPop ref="depot" @select="(e) => select('front_agent_admin_id', e)"></depotListPop>
    <supplierListPop
      ref="supplier"
      @select="(e) => select('supplier_id', e)"
      :params="{
        status: '1',
      }"
    ></supplierListPop>
  </a-modal>
</template>

<script>
import depotListPop from './depotListPop.vue'
import supplierListPop from '@/components/pop/supplierListPop'
import { bind, list } from '@/api/warehouse.js'

export default {
  components: {
    depotListPop,
    supplierListPop,
  },

  props: {
    supplierName: {
      type: String,
      default: '供货商',
    },
    showSupplier: {
      type: Boolean,
      default: true,
    },
    params: {
      type: Object,
      default() {
        return {}
      },
    },
    address: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      visible: false,
      btnLoading: false,
      form: {
        front_agent_admin_id: '',
        supplier_id: '',
      },

      front_agent_admin_name: '',
      supplier_name: '',
      rules: {
        front_agent_admin_id: [{ required: true, message: '请选择', trigger: 'change' }],
        supplier_id: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      list: [],
    }
  },

  async created() {
    let res = await list({
      pageSize: 10000,
      pageNo: 1,
    })

    if (res.code == 0) {
      this.list = res.data.list || []
    }
  },

  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    handleSearch(value) {
      if (!value) return
      let [item] = this.list.filter((d, index) => {
        return d.id == value
      })
      this.form.front_agent_admin_id = item.id
    },

    open(form) {
      if (form) {
        this.form = form
      }

      this.visible = true
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))

          this.btnLoading = true
          let res = await bind({ ...form, ...this.params })
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.$emit('callback')
          } else {
            this.$message.error(res.msg)
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
      this.front_agent_admin_name = ''
      this.supplier_name = ''
    },

    handle(type, item) {
      switch (type) {
        case 'open':
          this.$refs[item].visible = true
          break
      }
    },

    select(el, e) {
      switch (el) {
        case 'front_agent_admin_id':
          this.form.front_agent_admin_id = e.id
          this.front_agent_admin_name = e.name
          break

        case 'supplier_id':
          this.form.supplier_id = e.supplier_info.id
          this.supplier_name = e.supplier_name
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .inp {
    flex: 1;
    overflow: hidden;
    margin-right: 16px;
  }
}
</style>
